<template>
  <div class="hotproduct">
    <div class="left-arrows" @click="last"><i class="bi bi-chevron-left"></i></div>
    <div class="right-arrows" @click="next"><i class="bi bi-chevron-right"></i></div>
    <div class="hotproduct-container">
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, Ref } from 'vue';
import useEchartsData from '@/store/useEchartsData'
import * as echarts from 'echarts'
import { computed } from '@vue/reactivity';
import throttleFn from '@/utils/throttle'
const store = useEchartsData()

//charts对象
let mychart: any
//饼图数据索引
let index: Ref<number> = ref(0)
//容器
let container: HTMLElement

//饼图数据
const hotProductList = computed(() => {
  return store.hotproductList
})
//初始化图表
const initChart = () => {
  mychart = echarts.init(container, 'dark-blue')

  let option = {
    title: {
      text: '(*^_^*)热销商品销售金额占比统计',
      top: '5%',
      left: '5%',
      textStyle: {
        fontSize: container.offsetWidth / 100 * 2
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal',
      left: 'center',
      top: '10%',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',

        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  mychart.setOption(option)
}

//更新图表数据
const upDateMychart = () => {
  let hotList = hotProductList.value[index.value]
  let series = hotList.children.map(item => ({ name: item.name, value: item.value }))


  let newOption = {
    series: [
      {
        data: series
      }
    ]
  }


  mychart.setOption(newOption)
}

//点击切换图表
const last = () => {
  index.value--
  if (index.value < 0) {
    index.value = 0
    return
  }
  upDateMychart()
}
const next = () => {



  index.value++
  if (index.value > hotProductList.value.length - 1) {
    index.value = hotProductList.value.length - 1
    return
  }
  upDateMychart()
}

//自适应
const resize = () => {
  return throttleFn(function () {
    let newOption = {
      title: {
        textStyle: {
          fontSize: container.offsetWidth / 100 * 2
        }
      },

    }

    mychart.setOption(newOption)
    mychart.resize()
  }, 100)
}

onMounted(async () => {
  try {
    await store.getHotData()
  } catch (error) {
    console.log(error);
  }
  //获取容器
  container = document.querySelector('.hotproduct-container') as HTMLElement

  initChart()
  upDateMychart()
  window.addEventListener('resize', resize())
})
</script>

<style lang="less" scoped>
.hotproduct {
  width: 100%;
  height: 100%;
  position: relative;

  .hotproduct-container {
    height: 100%;
    width: 100%;
  }

  //箭头样式
  .left-arrows {
    position: absolute;
    font-size: 120px;
    color: #fff;
    top: 45%;
    left: 30px;
    z-index: 10;
  }

  .right-arrows {
    position: absolute;
    font-size: 120px;
    color: #fff;
    top: 45%;
    right: 30px;
    z-index: 10;
  }
}
</style>